import React,{Component} from "react";
import {Link, withRouter} from "react-router-dom";
import {Steps,Button } from "antd";
import moment from 'moment';
import ajax from "../ajaxMethod";

class BookS extends Component{
    constructor(props){
        super(props);
        this.state={
            ...this.props.location.values?(()=>{
                localStorage.setItem("valuesS", JSON.stringify(this.props.location.values));
                return this.props.location.values;
            })(): JSON.parse(localStorage.getItem("valuesS"))
        }
    }
    componentDidMount(){
        scrollTo(0,0);
    }
    onSubmit = (e)=>{
        //后台锁定票，直到有下一个请求。
        let path = {pathname:"/bookThird", values:{...this.state, submiteTime:new Date()}},
            _this = this;

        localStorage.setItem("valuesS", JSON.stringify(path.values));
        ajax.postAjax("/interface/book", {...this.state, username: localStorage.getItem("username")}, res=>{
            if(res.success){
                path.values.data = res.data;
                _this.props.history.replace(path);
            }else{
                console.error(res.description);
            }
        }, err=>{
            console.error(err);
        })
    }
    render(){
        const initalValues = this.state.initalValues;
        const values = this.state.values;
        let typeobj = {},
            toTypeobj ={},
            sumPay = 0,
            sumConstruction = 0,
            sumFule = 0,
            sumGoTrip = 0,//去程总的钱
            sumToTrip = 0,//返程总的钱
            type="",
            toType="",
            typeValue = "",
            toTypeValue = "";
        switch(initalValues.goType){
            case "0":{
                typeValue="经济舱";
                type = "economyClass";
            };break;
            case "1":{
                typeValue="商务舱";
                type = "businessClass";
            };break;
            case "2":{
                typeValue="头等舱";
                type = "firstClass";
            };break;
            default:
        }
        typeobj =  initalValues.goTrip[type];
        for(let i = 0; i <  values.passenger.length; i++){
            sumPay += values.passenger[i].pay;
            sumConstruction += values.passenger[i].construction;
            sumFule += values.passenger[i].fuel;
        }
        sumGoTrip = sumPay * typeobj.afterPrice + sumConstruction * typeobj.construction + sumFule * typeobj.fuel;

        if(Object.keys(initalValues.toTrip).length){
            switch(initalValues.toType){
                case "0":{
                    toTypeValue="经济舱";
                    toType = "economyClass";
                };break;
                case "1":{
                    toTypeValue="商务舱";
                    toType = "businessClass";
                };break;
                case "2":{
                    toTypeValue="头等舱";
                    toType = "firstClass";
                };break;
                default:
            }
            toTypeobj =  initalValues.toTrip[toType];
            sumToTrip = sumPay * toTypeobj.afterPrice + sumConstruction * toTypeobj.construction + sumFule * toTypeobj.fuel;
        }
        console.log("bookS-state",this.state);
        return(
        <div id="book">
            <div className="top">
                <div>
                    <div><Link to="/"><i className="logo"></i></Link></div>
                    <div className="step">
                        <Steps current={1} size="small">
                            <Steps.Step title="乘机信息" description="" />
                            <Steps.Step title="确认信息" description="" />
                            <Steps.Step title="支付" description="" />
                            <Steps.Step title="完成" description="" />
                        </Steps>
                    </div>
                </div>
            </div>
            <div className="content">
                <div className="left">
                    <div className="tips">
                        <p><i>i</i><span>该航班预计最晚于起飞前72小时完成出票，保障出行</span></p>
                        <p><i>i</i><span>每个订单最多只能预定4位乘客</span></p>
                        {(()=>{
                            if(!initalValues.goTrip.flight.child && !initalValues.goTrip.flight.baby){
                                return <p><i>i</i>您预订的产品仅限预订成人票</p>
                            }else if(initalValues.goTrip.flight.baby){
                                return <p><i>i</i>婴儿只能与成人预定同一航班,且需在成人带领下登机</p>
                            }
                        })()}
                    </div>
                    <div className="passenger-inf">
                        <h2>乘客</h2>
                        <div>
                           {
                            (()=>{
                                let i = 0,
                                    passenger = [];
                                for(;i < values.number; i++){
                                    passenger.push(<div className="item">
                                       <div className="i-number"><span>{i}</span></div>
                                       <div className="type"><span>{values.passenger[i].type === "0"?"成人":values.passenger[i].type==="1"?"儿童":"婴儿"}</span></div>
                                       <div className="name"><span>{values.passenger[i].name}</span></div>
                                       <div className="id-number"><span>证件号: <span>{values.passenger[i].IDnumber}</span></span></div>
                                       {/* <div className="id-number-value"></div> */}
                                       <div className="contact"><span>联系人</span></div>
                                       {values.contact.email?<div className="phone">
                                            <p className="ontonly-phone">{values.contact.phone}</p>
                                            <p className="ontonly-phone">{values.contact.email}</p>
                                       </div>:<div>
                                            <p className="only-phone">{values.contact.phone}</p>
                                       </div>}
                                       
                                    </div>)
                                }
                                return passenger;
                            })()
                           }
                        </div>
                    </div>
                    <Button onClick={this.onSubmit} type="submit">同意以下协议条款，去支付</Button>
                    <div className="rules">
                        <a>航程网站支付协议</a>
                        <i>、</i>
                        <a>预定须知</a>
                        <i>、</i>
                        <a>活动价格说明</a>
                        <i>、</i>
                        <a>关于民航乘客携带锂电池及危险品乘机的限制</a>
                        <i>，点击去支付即代表已阅读并同意上述条款</i>
                    </div>
                </div>
                <div className="right">
                    <div className="go-trip all-trip">
                        <div className="where">
                            <span className="trip">去</span>
                            <span>{moment(initalValues.goTrip.start.time).format("MM-DD")}</span>
                            <span>周{(()=>{
                                let week = "一";
                                switch(moment(initalValues.goTrip.start.time).format("E")){
                                    case "2":week = "二"; break;
                                    case "3":week = "三"; break;
                                    case "4":week = "四"; break;
                                    case "5":week = "五"; break;
                                    case "6":week = "六"; break;
                                    case "7":week = "日"; break;
                                    default: ;
                                }
                                return week;
                            })()}</span>
                            <span>{initalValues.goTrip.start.city}</span>
                            <span>-</span>
                            <span>{initalValues.goTrip.end.city}</span>
                        </div>
                        <div className="plain">
                            <span>{initalValues.goTrip.flight.company}</span>
                            <span>
                                {(()=>{
                                    let type = "小型";
                                    switch(initalValues.goTrip.flight.type){
                                        case 1:type = "中型";break;
                                        case 2:type = "大型";break;
                                        case 3:type = "巨型";break;
                                    }
                                    return initalValues.goTrip.flight.plane + "(" + type + "机)";
                                })()}
                            </span>
                            <span>{typeValue}</span>
                        </div>
                        {
                            (()=>{
                                let time = (moment(initalValues.goTrip.end.time).valueOf() - moment(initalValues.goTrip.start.time).valueOf())/1000;//秒
                                return <div className="when">
                                    <span>{moment(new Date(initalValues.goTrip.start.time)).format("HH:mm")}</span>
                                    <span className="over-time">{Math.floor(time / 3600)}h{parseInt(time % 3600 / 60)}m</span>
                                    <span>{moment(new Date(initalValues.goTrip.end.time)).format("HH:mm")}</span>
                                </div>
                            })()
                        }
                        <div className="location">
                            <span>{initalValues.goTrip.start.airport}</span>
                            <span>--------</span>
                            <span>{initalValues.goTrip.end.airport}</span>
                        </div>
                    </div>
                    {
                        (()=>{
                            // 返回的路程
                            if(Object.keys(initalValues.toTrip).length){
                                return <div div className="to-trip all-trip">
                                    <div className="where">
                                        <span className="trip">返</span>
                                        <span>{moment(initalValues.toTrip.start.time).format("MM-DD")}</span>
                                        <span>周{(()=>{
                                            let week = "一";
                                            switch(moment(initalValues.toTrip.start.time).format("E")){
                                                case "2":week = "二"; break;
                                                case "3":week = "三"; break;
                                                case "4":week = "四"; break;
                                                case "5":week = "五"; break;
                                                case "6":week = "六"; break;
                                                case "7":week = "日"; break;
                                                default:;
                                            }
                                            return week;
                                        })()}</span>
                                        <span>{initalValues.toTrip.start.city}</span>
                                        <span>-</span>
                                        <span>{initalValues.toTrip.end.city}</span>
                                    </div>
                                    <div className="plain">
                                        <span>{initalValues.toTrip.flight.company}</span>
                                        <span>
                                            {(()=>{
                                                let type = "小型";
                                                switch(initalValues.toTrip.flight.type){
                                                    case 1:type = "中型";break;
                                                    case 2:type = "大型";break;
                                                    case 3:type = "巨型";break;
                                                }
                                                return initalValues.toTrip.flight.plane + "(" + type + "机)";
                                            })()}
                                        </span>
                                        <span>{toTypeValue}</span>
                                    </div>
                                    {
                                        (()=>{
                                            let time = (moment(initalValues.toTrip.end.time).valueOf() - moment(initalValues.toTrip.start.time).valueOf())/1000;//秒
                                            return <div className="when">
                                                <span>{moment(new Date(initalValues.toTrip.start.time)).format("HH:mm")}</span>
                                                <span className="over-time">{Math.floor(time / 3600)}h{parseInt(time % 3600 / 60)}m</span>
                                                <span>{moment(new Date(initalValues.toTrip.end.time)).format("HH:mm")}</span>
                                            </div>
                                        })()
                                    }
                                    <div className="location">
                                        <span>{initalValues.toTrip.start.airport}</span>
                                        <span>--------</span>
                                        <span>{initalValues.toTrip.end.airport}</span>
                                    </div>
                                </div>
                            }
                        })()
                    }
                    {
                        (()=>{
                            return Object.keys(initalValues.toTrip).length?
                            <div className="other-pay">
                                <div>
                                    <span className="repent">去程退改￥{initalValues.goTrip[type].repent}</span>
                                    <span className="luggage">行李额{initalValues.goTrip[type].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.goTrip[type].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="repent">返程退改￥{initalValues.toTrip[toType].repent}</span>
                                    <span className="luggage">行李额{initalValues.toTrip[toType].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.toTrip[toType].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="construction">机建</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].construction+initalValues.toTrip[toType].construction} <span>x {sumConstruction}</span></sapn>
                                </div>
                                <div>
                                    <span className="fuel">燃油</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].fuel + initalValues.goTrip[type].fuel} <span>x {sumFule}</span></sapn>
                                </div>
                            </div>:
                            <div className="other-pay">
                                <div>
                                    <span className="repent">去程退改￥{initalValues.goTrip[type].repent}</span>
                                    <span className="luggage">行李额{initalValues.goTrip[type].luggage}KG</span>
                                    <sapn className="afterPrice price">￥{initalValues.goTrip[type].afterPrice}<span>x {sumPay}</span></sapn>
                                </div>
                                <div>
                                    <span className="construction">机建</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].construction} <span>x {sumConstruction}</span></sapn>
                                </div>
                                <div>
                                    <span className="fuel">燃油</span>
                                    <sapn className="price">￥{initalValues.goTrip[type].fuel} <span>x {sumFule}</span></sapn>
                                </div>
                            </div>
                        })()
                    }
                    <p><span>￥</span>{Object.keys(initalValues.toTrip).length?(sumGoTrip + sumToTrip).toFixed(2):(sumGoTrip).toFixed(2)}</p>
                </div>
            </div>
        </div>);
    }
  
}
export default withRouter(BookS);